<template>
  <div class="knowledge-base">
    <!-- 知识库 -->
    <!--头部4个小盒子  -->
    <div class="head panel3">
      <div class="header">
        <!-- 1 -->

        <!-- 2 -->
        <div class="item num">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/01.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>计划接入客户数</div>
          </div>
        </div>
        <!-- 3 -->
        <div class="item quota">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/001.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>预计接入客户数</div>
          </div>
        </div>
        <!-- 4 -->
        <div class="item households">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/03.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>本月提供客户数</div>
          </div>
        </div>
        <!-- 5 -->
        <div class="item completion-rate">
          <!-- 头部 图片 -->
          <div class="images">
            <img src="~@/assets/img/01.png" alt="" />
          </div>
          <div class="top-box">
            <div class="top-box-title">1560</div>
            <div>接入能源类型</div>
          </div>
        </div>
      </div>
      <div class="panel-footer"></div>
    </div>
    <!-- 中间 -->
    <div class="main">
      <div class="son-left panel3">
        <h2>市级区域发电统计</h2>
        <div class="chart">
          <bar-chart></bar-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
      <div class="son-right panel3">
        <h2>光伏收益构成</h2>
        <div class="chart">
          <pie-chart></pie-chart>
        </div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="com-footer panel3">
      <h2>光伏收益</h2>
      <div class="chart">
        <line-chart></line-chart>
      </div>
      <div class="panel-footer"></div>
    </div>
  </div>
</template>

<script>
import LineChart from './components/LineChart.vue'
import BarChart from './components/BarChart.vue'
import pieChart from './components/PieChart.vue'
export default {
  name: 'KnowledgeBase',
  components: {
    LineChart,
    BarChart,
    pieChart
  },
  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>
<style lang="scss" scoped>
@import './knowledgeBase.scss';
</style>
